<template>
  <div class="homefine">
     <!-- 头部 搜索 -->
    <header >
          <img src="@/assets/img-fine/扫码.png" alt="" class="header-img">
          <h4 class="header-p">发现</h4>
          <aside>
            <img src="@/assets/img-fine/搜索.png" alt="" class="header-img">
            <img src="@/assets/img-fine/消息.png" alt="" class="header-img">
          </aside>
    </header>
    <!-- 中部 -->
    <main>
      <!-- 导航栏 -->
      <div>
          <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="关注" name="关注">
               <!-- 动态 -->
            <div class="main-div2">
                <h3>你关注的店铺有新动态啦</h3>
                <aside>
                  <p>
                      <img src="@/assets/img-fine/三只松鼠.png" alt="">
                      <span>正在浏览</span>
                  </p>
                  <p>
                        <img src="@/assets/img-fine/资生堂.png" alt="" >
                        <span>资生堂</span>
                  </p> 
                  <p>
                        <img src="@/assets/img-fine/华为.png" alt="">
                        <span>华为</span>
                  </p>
                    
                </aside>
            </div>
              <!-- 三只松鼠 -->
            <div class="main-div3">
                <aside>
                  <p>
                    <img src="@/assets/img-fine/三只松鼠.png" alt="">
                              <span>三只松鼠旗舰店</span>
                  </p>
                  <p>查看更多 ></p>
                </aside>
                <article>
                  <div>
                    <img src="@/assets/img-fine/主图1.png" alt="">
                    <p>三只松鼠 芒果干</p>
                    <h1>￥21.90</h1>
                    <del>￥32.90</del>
                  </div>
                    <div>
                    <img src="@/assets/img-fine/主图2.png" alt="">
                    <p>三只松鼠 芒果干</p>
                    <h1>￥21.90</h1>
                    <del>￥32.90</del>
                  </div>
                    <div>
                    <img src="@/assets/img-fine/主图3.png" alt="">
                    <p>三只松鼠 芒果干</p>
                    <h1>￥21.90</h1>
                    <del>￥32.90</del>
                  </div>
                </article>
            </div>
            <!-- SK-LL -->
             <div class="main-div4">
                 <aside>
                  <p>
                    <img src="@/assets/img-fine/SK-II.png" alt="">
                              <span>SK-ll旗舰店</span>
                  </p>
                  <p> 关注</p>
                </aside>
                 <article>
                  <div>
                    <img src="@/assets/img-fine/主图5.png" alt="">
                    <p>升级版轻盈型大红瓶</p>
                    <h1>￥121.90</h1>
                    <del>￥232.90</del>
                  </div>
                    <div>
                    <img src="@/assets/img-fine/主图6.png" alt="">
                    <p>SK-ll前男友面膜6片装</p>
                    <h1>￥81.90</h1>
                    <del>￥92.90</del>
                  </div>
                    <div>
                    <img src="@/assets/img-fine/主图7.png" alt="">
                    <p>SK-ll神仙水230ml+小...</p>
                    <h1>￥221.90</h1>
                    <del>￥332.90</del>
                  </div>
                </article>
             </div>
            </el-tab-pane>
            <el-tab-pane label="直播" name="直播">直播</el-tab-pane>
            <el-tab-pane label="晒一晒" name="晒一晒">晒一晒</el-tab-pane>
            <el-tab-pane label="心愿墙" name="心愿墙">心愿墙</el-tab-pane>
            <el-tab-pane label="视频" name="视频">视频</el-tab-pane>
          </el-tabs>
      </div>
         <!-- 底部 -->
    <footer>
       <ul>
          <li @click="li1"><img src="@/assets/img-fine/首页.png" alt=""></li>
          <li @click="li2"><img src="@/assets/img-fine/分类.png" alt=""></li>
          <li ><img src="@/assets/img-fine/社区.png" alt=""></li>
          <li ><img src="@/assets/img-fine/购物车.png" alt="" class="img4"></li>
          <li><img src="@/assets/img-fine/我的.png" alt=""></li>
         </ul>
    </footer>
    </main>
  </div>
</template>

<script   setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router' 

const router = useRouter()
const activeTab = ref('关注')
const handleClick = ref('')
// 跳转
const li1 = ()=>{
  router.push({ name: 'HomeIndex' })
}
const li2 = ()=>{
  router.push({ name: 'HomeClassify' })
}
</script>

<style scoped> 
.homefine {
  background-image: url("@/assets/img-index/背景.png");
  background-size: cover;  /*替换了100rem*/
  min-height: 100vh;
  background-repeat: no-repeat;
  padding: 0 16px;
   position: relative;
}
.homefine header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.8rem;
  position: relative;
  z-index: 10;
}
.homefine header .header-p{
  color: white;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.homefine  header .header-img{
  display: flex;
  align-items: center;
  gap: 20px; /* 图标间距 */
  width: 1.4rem;
}
.homefine header aside{
  display: flex;
}
.homefine header aside .header-img{
  margin-left: 1.5rem;
}
/* 中部 */
/* 导航栏 */
:deep(.demo-tabs .el-tabs__item) {
  color: white !important; /* 强制白色字体 */
  font-size: 0.9rem;
  transition: all 0.3s ease;
}

:deep(.demo-tabs .el-tabs__item.is-active) {
  color: white !important;
  font-size: 1rem; /* 点击后字体变大 */
  font-weight: bold;
}
:deep(.demo-tabs .el-tabs__nav-wrap::after) {
  background-color: transparent !important; /* 隐藏默认底部边框 */
}
:deep(.demo-tabs .el-tabs__active-bar) {
  background-color: white !important;  /* 下划线颜色设置为白色 */
}
.el-tabs {
  padding-top: 0.5rem;
}
/* 动态 */
.main-div2{
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
  padding: 1rem; 
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
 .main-div2 h3{
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0 0 1rem 0; 
  text-align: center; 
  margin-right: 6rem;
}
 .main-div2 aside{
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-right: 4rem;
}
 .main-div2 aside p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
 .main-div2 aside img {
  width: 4rem; /* 调整图片大小 */
  height: 4rem;
  border-radius: 50%; /* 圆形头像效果 */
  object-fit: cover; /* 防止图片变形 */
}
 .main-div2 aside p  span{
   position: relative;
   padding-left: 1.2rem;
   color: rgb(133, 131, 131);
   font-size: 0.8rem;
}
 .main-div2 aside p:first-child  span{
  background-color: #f72b3c;
  line-height: 1.5rem;
  border-radius: 5px;
  color: white;
  padding:0 0.6rem;
  padding-left: 1.2rem;
}
 .main-div2 aside p:first-child span::before{
  background-color: white;
  left: 0.5rem;
}
 .main-div2 aside p span::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 0.4rem;
  background-color: #ff4d4f;
  border-radius: 50%;
}
/* 三只松鼠 */
.main-div3 {
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 0.8rem;
}
.main-div3 aside {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; 
  max-width: 20rem; 
  margin: 0 auto;
}
.main-div3 aside p {
  display: flex;
  align-items: center;
  gap: 0.5rem; 
}
.main-div3 aside p img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%; 
  object-fit: cover;
}

.main-div3 aside p span {
  font-weight: bold;
  font-size: 1.1rem;
}
.main-div3 article{
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.main-div3 article div img{
  width: 6rem;
}
.main-div3 article div p{
  font-size: 0.6rem;
  font-weight: bold;
  padding: 0.4rem 0;
}
.main-div3 article div h1{
  color: red;
  font-size: 1.2rem;
}
.main-div3 article div del{
  text-decoration:line-through;
  color: #8f8d8d;
}
/* SK-LL */
.main-div4 {
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
  padding: 1rem;
  margin-top: 0.8rem;
}
.main-div4 aside {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%; 
  max-width: 20rem; 
  margin: 0 auto;
}
.main-div4 aside p {
  display: flex;
  align-items: center;
  gap: 0.5rem; 
}
.main-div4 aside p img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%; 
  object-fit: cover;
}
.main-div4 aside p span {
  font-weight: bold;
  font-size: 1.1rem;
}
.main-div4 aside p:last-child{
  display: block;
  background-color: #f72b3c;
  color: white;
  border-radius: 2rem;
  padding:0.2rem 1rem ;
}
.main-div4 article{
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}
.main-div4 article div img{
  width: 6rem;
}
.main-div4 article div p{
  font-size: 0.6rem;
  font-weight: bold;
  padding: 0.4rem 0;
}
.main-div4 article div h1{
  color: red;
  font-size: 1.2rem;
}
.main-div4 article div del{
  text-decoration:line-through;
  color: #8f8d8d;
}
/* 底部 */
footer ul{
  height: 3.5rem;
  display: flex;
  justify-content: space-around;
  background: white;
  box-shadow: 0 -0.3rem 0.5rem rgba(0,0,0,0.08);
  align-items: center;
  border-top: 1px solid rgb(218, 211, 211);

}
footer ul li img{
  width: 1.7rem;
  height: 2.5rem;
    cursor: pointer;
}
footer ul li .img4{
  width: 2.5rem;
  height: 2.5rem;
}
</style>